<script setup lang="ts">
import { ElEmpty, ElPagination, ElTable, ElTableColumn, TableInstance } from 'element-plus';
import Empty from '../Empty.vue';
import { useTaskStore } from '@/store/task';

export interface TableProps {
  list: any;
  columns: any;
  loading?: boolean;
  height?: string;
  total?: number;
  pageSize?: number;
  pageNo?: number;
  border?: boolean;
  pagination?: boolean;
  getList?: (page: number, size: number) => void;
  handleSelectionChange?: (select: any) => void;
}

export interface TableEmits {
  getList?: (page: number, size: number) => void;
}

const props = withDefaults(defineProps<TableProps>(), {
  border: false,
  pagination: true,
  pageSize: 15,
  getList: () => {},
});
const tableRef = ref<TableInstance>();

const taskStore = useTaskStore();

const typeColor =  [
  "rgba(255,165,0,0.4)",
  "rgba(0,166,255,0.4)",
  "rgba(102,212,47,0.4)",
  "rgba(137,38,250,0.4)",
  "rgba(243,90,123,0.4)",
  "rgba(214,255,52,0.4)",
  "rgba(39,255,239,0.4)",
  "rgba(47,45,211,0.4)",
];

const tableRowStyle = ({ row }) => {
  return {
    backgroundColor: typeColor[row.taskStage] || 'transparent',
  }
}

// const emits = defineEmits<TableEmits>();

const handleCurrentChange = (pageNo: number) => {
  props.getList(pageNo, props['pageSize']);
};
</script>

<template>
<div
  v-if="props.loading"
  v-loading="props.loading"
  class="table-loading"
  element-loading-background="transparent"
  :style="{height: props.height}"
>
</div>
<Empty v-else-if="props.list.length === 0" :height="props.height" />
<template v-else>
  <div class="table-container" :style="{ height: `calc(${props.height} - 40px)` }">
    <ElTable
      ref="tableRef"
      :max-height="`calc(${props.height} - 40px)`"
      :data="props.list"
      :border="props.border"
      :stripe="false"
      style="width: 100%;"
      @selection-change="props.handleSelectionChange"
      :row-style="tableRowStyle"
    >
      <ElTableColumn
        v-for="column in props.columns"
        :prop="column.prop"
        :type="column.type || 'default'"
        :label="column.label"
        :width="column.width"
        :min-width="column.minWidth"
        :align="column.align"
        :fixed="column.fixed"
        :selectable="column.selectable || (() => true)"
      >
        <template v-if="column.render" #default="scope">
          <component :is="column.render" :row="scope.row" />
        </template>
        <template v-else-if="column.renderBtns" #default="scope">
          <ElButton
            v-for="btn in column.renderBtns"
            :link="btn.link"
            :type="btn.type"
            :disabled="btn.disableFn ? btn.disableFn(scope.$index, scope.row) : false"
            @click="btn.onClick(scope.$index, scope.row)"
          >
            {{ btn?.textFn ? btn.textFn(scope.$index, scope.row) : btn.text }}
          </ElButton>
        </template>
        <template v-else-if="column.prop" #default="scope">{{ scope.row[column.prop] === column.empty ? '--' : scope.row[column.prop] }}</template>
      </ElTableColumn>
    </ElTable>
  </div>
  <div class="table-pagination" v-if="props.pagination !== false">
    <ElPagination
      :total="props.total"
      :page-size="props['pageSize']"
      :current-page="props['pageNo']"
      layout="prev, pager, next, total"
      @current-change="handleCurrentChange"
      :background="false"
    />
  </div>
</template>
</template>

<style lang="less">
.table-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-container {
  width: 100%;
  max-width: 100%;
  .el-table__body {
    border-spacing: 0 10px;
  }
  .el-table {
    background-color: transparent;
    --el-table-row-hover-bg-color: transparent;
    --el-table-text-color: #fff;
  }
  .el-table tr {
    background-color: transparent;
  }
  .el-table th.el-table__cell {
    background-color: transparent;
  }
  .el-table th.el-table__cell.is-leaf {
    border: none;
  }
  .el-table__inner-wrapper:before {
    background-color: transparent;
  }
  .el-table thead {
    color: #ccc;
  }
  .el-table tbody .el-table__cell {
    background: rgba(0,0,0,0.1);
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    &:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-left: 1px solid rgba(255,255,255,0.12);
    }
    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-right: 1px solid rgba(255,255,255,0.12);
    }
  }
}
.table-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  .el-pagination__total {
    color: #fff;
  }
  .el-pagination button,
  .el-pagination button:disabled,
  .el-pager li {
    --el-pagination-button-color: #fff;
    background-color: transparent;
  }
}
</style>
